<template>
	<view class="demandpages">
		<u-image :src="imgurl + 'land/1.png'" mode="widthFix" width="100%"></u-image>
		<round-card>
			<double-tabs :active="current" :tabs="tabs" @change="v => (current = v)"></double-tabs>
			<view class="flex flex-column">
				<!-- 展示列表 -->
				<view class="flex-1 listcontainer">
					<view v-for="item in 4">
						<view class="flex px-4 align-center">
							<image class="headpoint" src="@/static/images/login/user.png" />
							<view>老许</view>
						</view>

						<view class="pdx-60 ft-28 mgl-16">中建一局项目需要资质</view>
						<view class="bottomline mgb-10">
							<view class="flex ft-28  pdy-10 justify-between align-center">
								<view class="flex">
									<view class="time">19小时前.</view>
									<view @click="replyFn">回复</view>
								</view>

								<view class="pdr-20">
									<image
										class="fabulous"
										src=""
									/>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 发布 -->
				<view class="bottombox flex align-center"><view @click="translateFn">发布提供你的供需信息</view></view>
				<view v-if="isshow"><bwin-emoticon-editor @post="handleImg"></bwin-emoticon-editor></view>
			</view>
		</round-card>
		<u-overlay :show="overlayshow" @click="overlayFn" :z-index="1"></u-overlay>
	</view>
</template>

<script>
import { imgurl } from '@/utils/constant.js'
import headerNav from '@/components/layout/headerNav.vue'
export default {
	data() {
		return {
			imgurl,
			current: 0,
			isshow: false,
			overlayshow: false,
			tabs: [
				{
					label: '供应方',
					image: { normal: imgurl + 'financial/tab-law.png', active: imgurl + 'financial/tab-law.png' }
				},
				{
					label: '需求方',
					image: {
						normal: imgurl + 'financial/tab-financial.png',
						active: imgurl + 'financial/tab-financial-highlight.png'
					}
				}
			],
			items: [
				{
					id: 0,
					image: 'land/1.png',
					title: '房屋抵押贷款',
					remarks: [
						{
							markType: 0,
							desc: '北京地区可上市交易的房产均可申请'
						},
						{
							markType: 1,
							desc: '北京地区可上市交易的房产均可申请'
						}
					]
				}
			]
		}
	},
	methods: {
		routerPush(url) {
			uni.navigateTo({
				url: url
			})
		},
		handleImg(data) {
			console.log(data, 'data')
		},
		translateFn() {
			this.isshow = true
			this.overlayshow = true
		},
		overlayFn() {
			this.isshow = false
			this.overlayshow = false
		},
		replyFn() {
			this.routerPush('/pages/demand/reply')
		}
	},
	components: {
		headerNav
	}
}
</script>
<style lang="scss">
.demandpages {
	.headpoint {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.time {
		color: #7b7a7a;
	}
	.listcontainer {
		padding-bottom: 100rpx;
	}
	.bottomline {
		border-bottom: 1rpx solid #e4e1e1;
		margin-left: 78rpx;
	}
	.fabulous {
		width: 14px;
		height: 14px;
	}
	.bottombox {
		position: fixed;
		z-index: 2;
		bottom: 0;
		width: 100%;
		background: #fff;
		height: 100rpx;
		line-height: 100rpx;
		border-top: 1rpx solid #e4e1e1;
		& > view {
			border: 1rpx solid #d0d0d0;
			width: 338rpx;
			font-size: 30rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			background: #e0e0e0;
			border-radius: 30rpx;
			margin-left: 100rpx;
		}
	}
}
</style>
